<template>
    <section>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
            <el-form-item label="图片" >
                <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "goodsfile" :limit=9 :file-list="goodsfiles" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                </el-upload>
            </el-form-item>

            <el-form-item label="标题" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="促销价"  prop="salePrice">
                        <el-input type="salePrice" v-model.number="ruleForm.salePrice" auto-complete="off" style="width: 100%;">元</el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="原价"  prop="costPrice">
                        <el-input type="costPrice" v-model.number="ruleForm.costPrice" auto-complete="off" style="width: 100%;">元</el-input>
                    </el-form-item>
                </el-col>
            </el-row>

          <!--<el-form-item v-for="(v,k) in value.attrs" :key='k' :label="v.show_name"  >-->
            <!--<el-checkbox-group  v-if="v.type==4" v-model="ruleForm[v.key_name]">-->
              <!--<el-checkbox   v-for ="(cvalue,cind) of v.options" :label="cvalue.value"  :key='cind'></el-checkbox>-->
            <!--</el-checkbox-group>-->


            <el-form-item  v-for=" (v,k) in sizeAarry" :key='k' :label="v" >
                <el-checkbox-group  v-model="ruleForm.type[k]">
                    <el-checkbox   v-for=" (cvalue,cind) in colorAarry"  :label="cvalue" :key="cind"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <!--<el-form-item  v-for=" item in sizeAarry" :label="item" >-->
                <!--<el-checkbox-group  v-model="ruleForm.type.item">-->
                    <!--<el-checkbox   v-for=" items in colorAarry" v-model="mpb.checked" :label="items" :name="item"></el-checkbox>-->
                <!--</el-checkbox-group>-->
            <!--</el-form-item>-->

            <el-form-item>
                <el-button @click="sizedialog = true">添加尺码</el-button><el-button @click="colordialog = true">添加颜色</el-button>
            </el-form-item>

            <el-form-item label="分类" prop="resource">
                <el-button  @click="typedialog = true">创建分类</el-button>
                <el-radio-group v-for=" item in typeArray"  v-model="ruleForm.resource">
                    <el-radio border  :label="item.type" ></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="商品详情展示" >
                <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "goodspic" :limit=9 :file-list="mainfiles" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('one')" :loading="logining">完成</el-button>
                <el-button @click="submitForm('again')" :loading="logining">完成下一个</el-button>
            </el-form-item>
        </el-form>

        <el-dialog  :visible.sync="typedialog">
            <el-upload  class="upload-demo" action="" list-type = "picture-card" :on-change = "files" :limit=1 :file-list="fileList" :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>

            <el-form :model="form4" :rules="rules4" ref="form4">
                <el-form-item prop="typename">
                    <el-input type="text" v-model="form4.typename" name="typename" auto-complete="off" placeholder="输入类型名称"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="typedialog = false">取 消</el-button>
            <el-button type="primary" @click.native.prevent="addType">确 定</el-button>
        </el-dialog>

        <el-dialog  :visible.sync="sizedialog">
            <el-form :model="form2" :rules="rules2" ref="form2">
                <el-form-item prop="size">
                    <el-input type="text" v-model="form2.size" name="size" auto-complete="off" placeholder="输入尺寸"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="sizedialog = false">取 消</el-button>
            <el-button type="primary" @click.native.prevent="sizeNorms">确 定</el-button>
        </el-dialog>

        <el-dialog  :visible.sync="colordialog">
            <el-form :model="form3" :rules="rules3" ref="form3">
                <el-form-item prop="color">
                    <el-input type="text" v-model="form3.color" name="color" auto-complete="off" placeholder="输入颜色"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="colordialog = false">取 消</el-button>
            <el-button type="primary" @click.native.prevent="colorNorms">确 定</el-button>
        </el-dialog>
    </section>
</template>

<script>
  import axios from "axios"

  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('价钱不能空'));
        }
        setTimeout(() => {
          // if (!Number.isInteger(value)) {
          //   callback(new Error('请输入数字值'));
          // } else {
            if (value <= 0) {
              callback(new Error('必须整数'));
            } else {
              callback();
            }
          // }
        }, 1000);
      };
      return {
        message:"",
        logining: false,
        sizeAarry:[],
        colorAarry:[],
        typeArray:[],
        fileList:[],
        mainfiles:[],
        goodsfiles:[],
        sizedialog:false,
        colordialog:false,
        typedialog:false,
        typeparam:'',
        ruleForm: {
          name: '',
          salePrice:"",
          costPrice:"",
          type: [],
          resource:'',
          desc: '',
          choosesize:[],
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 60, message: '长度在 3 到 60 个字符', trigger: 'blur' }
          ],
          salePrice: [
            { validator: checkAge, trigger: 'blur' }
          ],
          costPrice: [
            { validator: checkAge, trigger: 'blur' }
          ],
          // type: [
          //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          // ],
          resource: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        form2:{
          size:''
        },
        rules2: {
          size: [
            { required: true, message: '请填写尺寸', trigger: 'blur' }
          ]
        },
        form3:{
          color:''
        },
        rules3: {
          color: [
            { required: true, message: '请填写颜色', trigger: 'blur' }
          ]
        },
        form4 :{
          typename:''
        },
        rules4:{
          typename: [
            { required: true, message: '请填类型名称', trigger: 'blur' }
          ]
        }
      };
    },
    mounted(){
      this.getNorms();
      this.getType();
    },
    methods: {
      resetForm() {
        this.$refs["ruleForm"].resetFields();
        this.mainfiles = [];
        this.goodsfiles = [];
        this.ruleForm.choosesize=[];
        this.ruleForm.type=[];
        this.getNorms();
      },
      subFormAnext(){
        this.mainfiles =[];
        this.goodsfiles =[];
        this.ruleForm = {
            name: '',
            salePrice:"",
            costPrice:"",
            type: [],
            resource:'',
            desc: '',
            choosesize:[],
        }
      },
      submitForm(todo) {

        let ischoose;

        for(var i=0;i<this.sizeAarry.length;i++) {
          if(this.ruleForm.type[i].length > 0) {
            ischoose = true;
            break
          } else {
            ischoose = false;
          }
        }

        // this.sizeAarry.forEach((val,ind)=>{
        //   console.log(this.ruleForm.type[ind])
        //
        //   if(this.ruleForm.type[ind].length > 0) {
        //      ischoose = true;
        //   } else {
        //     ischoose = false;
        //   }
        // })

        if(ischoose){
        this.$refs.ruleForm.validate((valid) => {
          let addfrom = new FormData();

          addfrom.append('name', this.ruleForm.name);
          addfrom.append('salePrice', this.ruleForm.salePrice);
          addfrom.append('costPrice', this.ruleForm.costPrice);
          //this.addfrom.append('type', this.ruleForm.type);
          addfrom.append('resource', this.ruleForm.resource);
          addfrom.append('desc', this.ruleForm.desc);

          this.goodsfiles.forEach((val,ind)=>{
            // console.log(val.raw);
            addfrom.append('goodsfiles', val.raw);
          });

          this.mainfiles.forEach((val,ind)=>{
            // console.log(val.raw);
            addfrom.append('mainfiles', val.raw);
          });

          this.sizeAarry.forEach((val,ind)=>{
            if(this.ruleForm.type[ind].length > 0){
              addfrom.append(val, this.ruleForm.type[ind]);
              //选择的size
              addfrom.append("choosesize",this.ruleForm.choosesize[ind] = val);
            }
          });

          if (valid) {
            this.logining = true;

            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
            // console.log(todo)
            axios.post("/goodslist/addGoods",addfrom ,config).then((ress)=>{
              let res = ress.data;
              if(res.status == "0"){
                this.logining = false;
                if(todo == "one"){
                  this.$router.push({path:'/goodsCenter/goodsList.vue'})
                }else {
                  this.resetForm();
                }
              }else{
                this.logining = false;
                this.message = "新建失败";
                this.open();
              }
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
        }else{
          this.message = "请选择尺码！";
          this.open();
        }
      },
      open() {
        this.$message(this.message);
      },
      mainfile(){

      },
      goodsfile(file,fileList){
        this.goodsfiles=fileList;
        // console.log(file);
        //this.addfrom.append('goodsfile', file.raw);
      },
      goodspic(file,fileList){
        this.mainfiles=fileList;
        //console.log(this.mainfiles)
        //this.addfrom.append('mainfiles', this.mainfiles);
      },

      getNorms() {
        axios.get("/goodslist/getNorms").then((response) => {
          let res = response.data.result.list[0];
          this.sizeAarry = res.size;
          this.colorAarry = res.color;

          res.size.forEach((val, ind) => {
            // console.log(val, ind)
            this.$set(this.ruleForm.type, ind, []);
          })
        })
      },

      getType(){
          axios.get("/typelist/getType").then((response)=>{
            let res = response.data;
            this.typeArray = res.result.list;
          })
      },
      sizeNorms(){
        this.$refs.form2.validate((valid) => {
          if (valid) {
            axios.post("/goodslist/addNorms",{
              size: this.form2.size,
            }).then((ress)=> {
              let res = ress.data;
              if (res.status == "0") {
                this.getNorms();
                this.sizedialog=false;
                this.form3.color="";
              } else {
                this.message = res.result;
                this.open();
              }
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      colorNorms(){
        this.$refs.form3.validate((valid) => {
          if (valid) {
            axios.post("/goodslist/addNorms",{
              color : this.form3.color,
            }).then((ress)=> {
              let res = ress.data;
              if (res.status == "0") {
                this.getNorms();
                this.colordialog=false;
                this.form3.color="";
              } else {
                this.message = res.result;
                this.open();
              }
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      files(file, fileList){
        this.typeparam = new FormData();
        // console.log(file)
        this.typeparam.append('image', file.raw);
      },
      addType() {
        this.$refs.form4.validate((valid) => {
          if (valid) {
            this.typeparam.append('typename', this.form4.typename);
              let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
            // console.log(this.param)
            axios.post("/typelist/addType",this.typeparam ,config).then((ress)=>{
              let res = ress.data;
              if(res.status == "0"){
                this.typedialog=false;
                this.fileList=[];
                this.form4.typename="";
                this.getType();
              }else{

              }
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        })
      },
    }
  }
</script>

<style  lang="scss" scoped>
  .buttom{
    margin-left: 100px;
  }
  .el-form{
    margin-top: 20px;
  }
  .el-radio{
    margin-right: 10px;
  }
</style>
